<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>壁纸展示与背景音乐</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 2em;
            margin-bottom: 20px;
        }

        img {
            max-width: 100%;
            border-radius: 8px;
        }

        .download-btn {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.2em;
            margin-top: 20px;
            display: inline-block;
        }

        .download-btn:hover {
            background-color: #0056b3;
        }

        .music-btn {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.2em;
            margin-top: 20px;
            display: inline-block;
            cursor: pointer;
        }

        .music-btn.stop {
            background-color: #dc3545;
        }

        .volume-control {
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <div class="container">
        

        <!-- 显示的图片 -->
        <img src="/image/1.jpg" alt="壁纸">

        <br>
        <a href="/image/1.jpg" download="wallpaper.jpg" class="download-btn">下载壁纸</a>

        <!-- 背景音乐 -->
        <audio id="backgroundMusic" loop>
            <source src="/music/music.mp3" type="audio/mp3">
            你的浏览器不支持音频元素。
        </audio>

        <!-- 音乐控制按钮 -->
        <br>
        <button id="musicBtn" class="music-btn">播放背景音乐</button>

        <!-- 音量调节 -->
        <div class="volume-control">
            <label for="volumeSlider">音量:</label>
            <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.5">
        </div>
    </div>

    <script>
        window.onload = function () {
            let musicPlaying = false; // 音乐是否在播放
            const music = document.getElementById('backgroundMusic');
            const musicBtn = document.getElementById('musicBtn');
            const volumeSlider = document.getElementById('volumeSlider');

            // 初始音量
            music.volume = 0.5;  // 默认音量为 50%

            // 切换背景音乐播放状态
            function toggleMusic() {
                if (musicPlaying) {
                    music.pause(); // 暂停音乐
                    musicBtn.textContent = '播放背景音乐'; // 更新按钮文本
                    musicBtn.classList.remove('stop'); // 移除停止按钮样式
                } else {
                    music.play(); // 播放音乐
                    musicBtn.textContent = '暂停背景音乐'; // 更新按钮文本
                    musicBtn.classList.add('stop'); // 添加停止按钮样式
                }
                musicPlaying = !musicPlaying; // 切换音乐状态
            }

            // 音量调节
            volumeSlider.addEventListener('input', function () {
                music.volume = volumeSlider.value;  // 设置音量
            });

            // 绑定按钮事件
            musicBtn.addEventListener('click', toggleMusic);
        }
    </script>

</body>

</html>